<!doctype html>
<html lang="en">
  <head>
    <title>Demo page</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
  </head>
  <body>
    <div id="chart">
      st=>start: Start|past:>http://www.google.com[blank]
      e=>end: End:>http://www.google.com
      op1=>operation: My Operation|past:$myFunction
      op2=>operation: Stuff|current
      sub1=>subroutine: My Subroutine|invalid
      cond=>condition: Yes
      or No?|approved:>http://www.google.com
      c2=>condition: Good idea|rejected
      io=>inputoutput: catch something...|request
      para=>parallel: parallel tasks
      in=>input: some in
      out=>output: some out

      st->op1(right)->cond
      cond(yes, right)->c2
      cond(no)->para
      c2(true)->io->e
      c2(false)->e

      para(path1, left)->sub1(top)->op1
      para(path2, right)->op2->e
      para(path3, bottom)->in->out->e
    </div>
    <script>
      function myFunction(event, node) {
        console.log("You just clicked this node:", node);
      }
    </script>
		<script src="/node_modules/jquery/dist/jquery.js"></script>
    <script src="/node_modules/raphael/raphael.js"></script>
    <script src="/release/flowchart.js"></script>
		<script>
		$('#chart').flowChart();
		</script>
  </body>
</html>
